<template>
  <div>
    <el-calendar>
      <template
          slot="dateCell"
          slot-scope="{date, data}">
        <div style="min-height: 85px" @click="handleClick(data.day)">
          <div>{{ data.day.split('-').slice(1).join('-') }}</div>
          <div v-if="scheduleData.find(v=>v.date===data.day)" v-html="scheduleData.find(v => v.date === data.day).content"></div>
        </div>
      </template>
    </el-calendar>
    <!--添加日程的对话框  -->
    <div>
      <el-dialog title="设置日程" :visible.sync="dialogVisible" width="25%">
        <el-form ref="calendarForm" :model="calendarForm" label-width="50px">
          <el-form-item label="日程">
            <el-input  placeholder="请输入内容" v-model="calendarForm.content"  clearable></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="warning" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--提醒弹框    -->
    <div>
      <el-dialog title="设置日程" :visible.sync="Visible" width="20%">
        <el-card>
          <div v-html="content" style="line-height: 30px">
          </div>
        </el-card>
        <span slot="footer" class="dialog-footer">
          <el-button type="success" @click="saveContent()">我知道了</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "RemindView",
  data() {
    return {
      value: new Date(),
      scheduleData: [],
      calendarForm: {},
      dialogVisible: false,
      Visible: false,
      content: '',
      user: localStorage.getItem("user") ? (JSON).parse(localStorage.getItem("user")) : {},
    }
  },
  created() {
    this.getAll();

  },
  methods: {
    saveContent() {
      this.Visible = false;

    },
    //ok
    getAll() {
      request.get("calendar/"+this.user.userId).then(res => {
        if (res.code === '0') {
          this.scheduleData = res.data;
          const date = new Date().toJSON().split('T').join('').substr(0, 10);
          const data = this.scheduleData.find(v => v.date === date)
          if (data) {
            this.content = data.content;
            this.Visible = true;
          }
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    //点击框框调用的方法 -- 设置日程安排
    handleClick(day) {
      //点击添加日程时,相同日期对应的所有对象查出
      this.calendarForm.date = day;
      this.calendarForm.userId = this.user.userId;
      //回显一个值
      request.post("calendar/setCalendar",this.calendarForm).then(res=>{
        if (res.code === '0') {
          if (res.data !== null) {
            this.calendarForm = res.data;
          }
        }else {
          this.$message.error(res.msg);
        }
        /*this.calendarForm.date = day;*/
        this.dialogVisible = true;
      })

      /*也可以这么写,初始化一个对象,并且把值赋给他
      this.calendarForm={date : day}
      */

    },
    submit() {
      this.calendarForm.userId = this.user.userId;
      request.post("calendar/saveCalendar",this.calendarForm).then(res=>{
        if (res.code === '0') {
          this.$message.success("设置日程成功");
          this.getAll();
          this.dialogVisible = false;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
  }

}
</script>

<style>
.is-selected {
  color: #1989FA;
}
/*强制覆盖掉该组件的定长*/
.el-calendar-table .el-calendar-day {
  height: auto !important;
  min-height: 85px;
}

</style>